import {
  watch,
  watchEffect,
  reactive,
  computed
} from './myvue-composition-api';

const oABtn1 = document.querySelector('#aBtn1');
const oCBtn1 = document.querySelector('#cBtn1');
const oABtn2 = document.querySelector('#aBtn2');
const oCBtn2 = document.querySelector('#cBtn2');

const state1 = reactive({
  a: 1,
  b: {
    c: 2
  }
});

const state2 = reactive({
  a: 1000,
  b: {
    c: 2000
  }
});

const res1 = computed(() => state1.a + state1.b.c);
const res2 = computed(() => state2.a + state2.b.c);
// console.log(res1, res2);
//ComputedRef {_value: 3} ComputedRef {_value: 3000}

// console.log(state1, state2);

oABtn1.addEventListener(
  'click',
  function () {
    state1.a = 100;
  },
  false
);

oCBtn1.addEventListener(
  'click',
  function () {
    state1.b.c = 200;
  },
  false
);

oABtn2.addEventListener(
  'click',
  function () {
    state2.a = 10000;
  },
  false
);

oCBtn2.addEventListener(
  'click',
  function () {
    state2.b.c = 20000;
  },
  false
);

watchEffect(() => {
  console.log('watchEffect -> state1.a', state1.a);
});

watchEffect(() => {
  console.log('watchEffect -> state1.b.c', state1.b.c);
});

watchEffect(() => {
  console.log('watchEffect -> state2.a', state2.a);
});

watchEffect(() => {
  console.log('watchEffect -> state2.b.c', state2.b.c);
});

watch(
  () => state1.a,
  (cur, prev) => {
    console.log('watch -> state1.a', state1.a);
  }
);

watch(
  () => state1.b.c,
  (cur, prev) => {
    console.log('watch -> state1.b.b', state1.b.c);
  }
);

watch(
  () => state2.b.c,
  (cur, prev) => {
    console.log('watch -> state2.b.b', state2.b.c);
  }
);

watch(
  () => state2.b.c,
  (cur, prev) => {
    console.log('watch -> state2.b.b', state2.b.c);
  }
);
